
// 工具的封装
/**
 * @param {选择器} selector 
 */
function $(selector){
    return document.querySelector(selector);
}

var xhr = new XMLHttpRequest();
xhr.open("GET", "./json/goodslistone.json");
xhr.send(null);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        concertGoods(xhr.responseText)
    }
}

fetch('./json/goodslisttwo.json').then(res => {
    return res.json();
}).then(data => {
    dramagoods(data.data);
    
})

fetch('./json/goodslistthree.json').then(res => {
    return res.json();
}).then(data => {
    sportGoods(data.data);
    
})

fetch('./json/goodslistfour.json').then(res => {
    return res.json();
}).then(data => {
    childrenGoods(data.data);
    lazyload("#lazyload-img")
    
})


function  concertGoods(data){
    data = JSON.parse(data);

    // console.log(data.data)
    let leftbox = $(".dm-content-1 .box-left");
    let rightbox = $(".dm-content-1 .box-right");
    let [res,htmlleft,htmlright] = [data.data, '', ''];
    for(let i = 0; i < res.length ;i++){
        let item = res[i];
        if(i === 0){
            
            htmlleft +=`<img class="box-left__bg" id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                        <div class="box-left__info">
                            <div class="title">${res[i].name}</div>
                            <div class="details">￥${res[i].formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                        </div>`
            leftbox.innerHTML = htmlleft;
        }else{
            htmlright +=`<a href="./shoppingcart.html" class="box-right__item">
                            <div class="itemimg">
                            <img id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                            </div>
                            <div class="iteminfo">
                                <div class="title" title="${item.name}">${item.name}</div>
                                <div class="venue">${item.venueName}</div>
                                <div class="showtime">${item.showTime}</div>
                                <div class="price">￥${item.formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                            </div>
                        </a>`
            rightbox.innerHTML = htmlright;
        }
        
    }
    
    
}


function  dramagoods(data){
    let leftbox = $(".dm-content-2 .box-left");
    let rightbox = $(".dm-content-2 .box-right");
    let [res,htmlleft,htmlright] = [data, '', ''];

    for(let i = 0; i < res.length ;i++){
        let item = res[i];
        if(i === 0){
            
            htmlleft +=`<img class="box-left__bg" id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                        <div class="box-left__info">
                            <div class="title">${res[i].name}</div>
                            <div class="details">￥${res[i].formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                        </div>`
            leftbox.innerHTML = htmlleft;
        }else{
            htmlright +=`<a href="#" class="box-right__item">
                            <div class="itemimg">
                            <img id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                            </div>
                            <div class="iteminfo">
                                <div class="title" title="${item.name}">${item.name}</div>
                                <div class="venue">${item.venueName}</div>
                                <div class="showtime">${item.showTime}</div>
                                <div class="price">￥${item.formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                            </div>
                        </a>`
            rightbox.innerHTML = htmlright;
        }
        
    }
    
}


function  sportGoods(data){
    let leftbox = $(".dm-content-3 .box-left");
    let rightbox = $(".dm-content-3 .box-right");
    let [res,htmlleft,htmlright] = [data, '', ''];

    for(let i = 0; i < res.length ;i++){
        let item = res[i];
        if(i === 0){
            
            htmlleft +=`<img class="box-left__bg" id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                        <div class="box-left__info">
                            <div class="title">${res[i].name}</div>
                            <div class="details">￥${res[i].formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                        </div>`
            leftbox.innerHTML = htmlleft;
        }else{
            htmlright +=`<a href="#" class="box-right__item">
                            <div class="itemimg">
                            <img id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                            </div>
                            <div class="iteminfo">
                                <div class="title" title="${item.name}">${item.name}</div>
                                <div class="venue">${item.venueName}</div>
                                <div class="showtime">${item.showTime}</div>
                                <div class="price">￥${item.formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                            </div>
                        </a>`
            rightbox.innerHTML = htmlright;
        }
        
    }
    
}


function  childrenGoods(data){
    let leftbox = $(".dm-content-4 .box-left");
    let rightbox = $(".dm-content-4 .box-right");
    let [res,htmlleft,htmlright] = [data, '', ''];

    for(let i = 0; i < res.length ;i++){
        let item = res[i];
        if(i === 0){
            
            htmlleft +=`<img class="box-left__bg" id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                        <div class="box-left__info">
                            <div class="title">${res[i].name}</div>
                            <div class="details">￥${res[i].formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                        </div>`
            leftbox.innerHTML = htmlleft;
        }else{
            htmlright +=`<a href="#" class="box-right__item">
                            <div class="itemimg">
                            <img id="lazyload-img" src="http://img.alicdn.com/tfs/TB1WDcISkvoK1RjSZFNXXcxMVXa-540-720.png" data-src="${item.verticalPic}">
                            </div>
                            <div class="iteminfo">
                                <div class="title" title="${item.name}">${item.name}</div>
                                <div class="venue">${item.venueName}</div>
                                <div class="showtime">${item.showTime}</div>
                                <div class="price">￥${item.formattedPriceStr.replace(/[^0-9]+\w+/g, '')}<span>起</span></div>
                            </div>
                        </a>`
            rightbox.innerHTML = htmlright;
        }
        
    }
    
}

var timer = null;
var cHeight = document.documentElement.clientHeight;
function lazyload(selector){
      let imgList = document.querySelectorAll(selector);
      console.log(imgList);
      // 元素的offset操作会导致页面回流;
      let itemArray = Array.from(imgList).map(item => {
            // console.log(item.getAttribute("data-src"));
            return {
                  img : item,
                  top : item.offsetParent.offsetParent.offsetTop + 620,
                  src : item.getAttribute("data-src"),
            }
      })
      console.log(itemArray);

      load(itemArray);
      window.addEventListener("scroll",load.bind(null,itemArray));
}

function load(itemArray){
      if(timer !== null) return ;
      // console.log(1);
      timer = setTimeout( () => {
            //比对;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var min = scrollTop + cHeight;
            itemArray.forEach( item => {
                  if(item.top < min){
                        item.img.src = item.src;
                  }
            })

            timer = null;
      },300)
}
